<template>
  <div class="m-dialog">
    <Dialog v-bind="$attrs" class="dialog" :visible.sync="show" :width="width" top="18vh">
      <template v-slot:title>
        <div class="title">{{ title }}</div>
      </template>

      <template v-slot>
        <slot/>
      </template>

      <template v-slot:footer>
        <slot name="footer"/>
      </template>
    </Dialog>
  </div>
</template>

<script>
import { Dialog } from 'element-ui'

export default {
  name: 'MDialog',
  components: { Dialog },
  props: {
    width: {
      type: String,
      default: '470px'
    },
    showDialog: Boolean,
    title: String
  },
  data() {
    return {
      show: false
    }
  },
  watch: {
    showDialog(val) {
      this.show = val
    },
    show(val) {
      this.$emit('update:showDialog', val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.m-dialog {
  /deep/ .el-dialog {
    border-radius: 10px;
  }

  /deep/ .el-dialog__headerbtn {
    border: solid 1px $theme-color-1;
    border-radius: 25px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;

    i {
      color: $theme-color-1;
    }
  }

  .title {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    padding: 0 15px;
    padding-bottom: 25px;
    border-bottom: solid 1px #eaeaea;
  }
}
</style>
